<template>
  <div class="user">
    <div class="wrapper">
      <el-card style="margin-top:20px;">
        <div class="header" style="text-align: center">
          <p>{{ user.username ? user.username : 'Please Login' }}</p>
        </div>
        <el-container>
          <div class="submenu">
            <el-menu
              active-text-color="white"
              text-color="#D5D8DC"
              :default-active="$route.path"
              background-color="#08ade6"
              router
              style="height:610px; "
            >
            <el-menu-item index="/user/blog">
              <el-icon><Comment /></el-icon>
              <span>Blog</span>
            </el-menu-item>
            <el-menu-item index="/user/order">
              <el-icon><List /></el-icon>
              <span>Order</span>
            </el-menu-item>
          </el-menu>
          </div>
          <div class="main"  style="padding: 10px; width:900px">
            <RouterView></RouterView>
          </div>
        </el-container>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from "@/stores/user";
import { List,Comment } from '@element-plus/icons-vue';

let user = ref(
  {
    username:'',
    password:''
  }
)

const userStore = useUserStore()

onMounted(()=>{
  user.value = userStore.user
}) 
</script>
<style lang="less" scoped>
.header {
  text-align: left;
  width: 100%;
  height: 100px;
  line-height: 100px;
  font-size: 40px;
  font-weight: 700;
  color: #08ade6;
}

.el-menu-item {
  font-size:20px;
  font-weight: 700;
}
</style>
